<template>
  <view class="index-page">
    <view class="book-info">
      <span class="book-name" @click="onClickName">
        {{ defaultBook.bookName }}
      </span>
      <!-- 收入 / 支出概览 -->
      <view class="overview-info" @click="isMonthData = !isMonthData">
        <view class="overview-month_or_total">{{
          isMonthData ? `${curMonth}月结余` : '总结余'
        }}</view>
        <view class="balance">
          {{
            isMonthData ? overviewInfo.monthBalance : overviewInfo.totalBalance
          }}
        </view>
        <view class="in_and_out">
          <span class="in_and_out_label in">收入</span>
          <span class="in_and_out_number">
            {{
              isMonthData ? overviewInfo.monthIncome : overviewInfo.totalIncome
            }}
          </span>
          <span class="divide">|</span>
          <span class="in_and_out_label out">支出</span>
          <span class="in_and_out_number">
            {{
              isMonthData ? overviewInfo.monthOutlay : overviewInfo.totalOutlay
            }}
          </span>
        </view>
      </view>
      <!-- 账单列表 -->
      <view class="record-list">
        <ul>
          <li
            class="record-group-item"
            v-for="(item, index) in records"
            :key="index"
          >
            <view class="date_and_dailyTotal">
              <span class="dete">
                <span>{{ $moment(item.date).format('MM月DD日') }}</span>
                <span>{{ formatDayOfWeek(item.date) }}</span>
              </span>
              <span class="dailyTotal">
                <span v-if="item.dayIncome > 0">收入{{ item.dayIncome }}</span>
                <span v-if="item.dayOutlay > 0">支出{{ item.dayOutlay }}</span>
              </span>
            </view>
            <view
              class="record-item"
              v-for="(record, idx) in item.recordList"
              :key="idx"
              @click="onClickRecord(record)"
            >
              <view class="record-item-baseinfo">
                <view
                  class="tag-icon"
                  :style="{ background: record.iconColor }"
                >
                  <i class="icon iconfont" :class="record.icon"></i>
                </view>
                <view class="record-item-info">
                  <span class="tag-name">{{ record.tagName }}</span>
                  <span class="record-item-remark">{{ record.remark }}</span>
                </view>
              </view>
              <view class="record-item-amount">
                {{ record.type === '支出' ? '-' : '+' }}{{ record.amount }}
              </view>
            </view>
          </li>
        </ul>
      </view>

      <view class="add-record" @click="onClickAddRecord">
        <i class="icon iconfont icon-jiahao"></i>
      </view>
    </view>
    <!-- 底部tab栏 -->
    <tab-bar activeTab="index"></tab-bar>

    <book-mgr ref="bookMgrRef" :booksList="booksList"></book-mgr>

    <record-mgr ref="recordMgrRef" @update="handleUpdate"></record-mgr>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import emptyBook from '@/static/image/emptyBook.svg'
import tabBar from '@/components/tabBar/index.vue'
import bookMgr from './modal/bookMgr.vue'
import recordMgr from './modal/recordMgr.vue'
import { book } from '@/type/books'
import { recordsItem, recordItem } from '@/type/records'
import { formatDayOfWeek } from '@/utils/tool'
export default Vue.extend({
  components: { tabBar, bookMgr, recordMgr },
  data() {
    return {
      title: 'Hello',
      emptyBook,
      booksList: [] as book[],
      defaultBook: {} as book,
      curMonth: 0,
      isMonthData: true, // 是否显示月份统计数据 false则为全部统计数据
      overviewInfo: {
        monthIncome: 0,
        monthOutlay: 0,
        monthBalance: 0,
        totalIncome: 0,
        totalOutlay: 0,
        totalBalance: 0,
      },
      params: {
        pageSize: 10,
        pageNum: 1,
        asc: false,
        column: 'date',
      },
      records: [] as recordsItem[],
      recordTotal: 0,
    }
  },
  methods: {
    formatDayOfWeek,
    getBooks() {
      this.$api.getBooksApi().then((res: any) => {
        if (!res.data.length) {
          uni.navigateTo({ url: '/pages/books/bookTemplate' })
        } else {
          this.booksList = res.data
          const defaultBook = res.data.filter(
            (book: book) => book.defaultFlag === 1
          ).length
            ? res.data.filter((book: book) => book.defaultFlag === 1)[0]
            : res.data[0]
          this.defaultBook = defaultBook
          this.getOverviewByBookId()
          this.getRecordsByBookId(true)
          this.getBooksById()
        }
      })
    },
    onClickName() {
      ;(this.$refs.bookMgrRef as any).open()
    },
    // 获取统计数据 当月、全部
    getOverviewByBookId() {
      this.$api
        .getOverviewByBookIdApi(null, this.defaultBook.id)
        .then((res: any) => {
          if (res.code === 1) {
            this.overviewInfo = res.data
          }
        })
    },
    // 获取记录列表
    getRecordsByBookId(refresh = false) {
      if (refresh) {
        this.records = []
        this.params.pageNum = 1
        this.params.pageSize = 10
      }
      this.$api
        .getRecordsByBookIdApi(this.params, this.defaultBook.id)
        .then((res: any) => {
          if (res.code === 1) {
            this.records = this.records.concat(res.data.list)
            this.recordTotal = res.data.total
          }
        })
    },
    // 点击某条记录
    onClickRecord(record: recordItem) {
      ;(this.$refs['recordMgrRef'] as any).open(record)
    },
    // 获取账本信息
    getBooksById() {
      this.$api.getBooksByIdApi(null, this.defaultBook.id).then((res: any) => {
        if (res.code === 1) {
          this.$store.commit('books/SET_BOOKINFO', this.$cloneDeep(res.data))
        }
      })
    },
    // 新增记录
    onClickAddRecord() {
      uni.navigateTo({
        url: '/pages/records/recordSave',
      })
    },
    // 更新列表
    handleUpdate() {
      this.getRecordsByBookId(true)
      this.getOverviewByBookId()
    }
  },
  created() {
    uni.hideTabBar()
    this.curMonth = this.$moment(new Date()).month() + 1
  },
  onShow() {
    this.getBooks()
  },
  onReachBottom() {
    if (this.records.length < this.recordTotal) {
      this.params.pageNum += 1
      this.getRecordsByBookId()
    }
  },
})
</script>

<style lang="less" scoped>
.index-page {
  width: 100%;
  padding: 10rpx 48rpx;
  box-sizing: border-box;
  .book-info {
    .book-name {
      font-size: 36rpx;
      font-weight: bold;
      position: relative;
      color: #333;
      padding-right: 30rpx;
      &::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: 25rpx;
        right: 0rpx;
        border: 10rpx solid transparent;
        border-top-color: #333;
      }
    }
  }
  .overview-info {
    width: calc(100vw - 96rpx);
    margin-top: 40rpx;
    padding: 50rpx 30rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(71, 107, 160, 0.1);
    .overview-month_or_total {
      font-size: 28rpx;
      color: #666666;
    }
    .balance {
      font-size: 34rpx;
      color: #333;
      font-weight: bold;
      margin-top: 10rpx;
    }
    .in_and_out {
      margin-top: 30rpx;
      .in_and_out_label {
        padding: 6rpx 15rpx;
        border-radius: 40rpx;
        font-size: 24rpx;
        color: #fff;
        line-height: 30rpx;
        margin-right: 10rpx;
        &.in {
          background: #91d781;
        }
        &.out {
          background: #ff9899;
        }
      }
      .divide {
        width: 1rpx;
        height: 30rpx;
        color: #ddd;
        margin: 0 20rpx;
      }
      .in_and_out_number {
        color: #666;
      }
    }
  }
  .record-list {
    padding-bottom: 100rpx;
    .record-group-item {
      width: calc(100vw - 96rpx);
      margin-top: 40rpx;
      .date_and_dailyTotal {
        display: flex;
        justify-content: space-between;
        color: #8a8a8c;
        .dete {
          span {
            margin-right: 10rpx;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        .dailyTotal {
          span {
            margin-left: 50rpx;
            &:first-child {
              margin-left: 0;
            }
          }
        }
      }
    }
    .record-item {
      width: 100%;
      height: 140rpx;
      padding: 0 30rpx;
      margin-top: 20rpx;
      background: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .record-item-baseinfo {
        display: flex;
        flex-direction: row;
        flex: 1;
        .tag-icon {
          width: 80rpx;
          height: 80rpx;
          flex-shrink: 0;
          border-radius: 20rpx;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            font-size: 48rpx;
          }
        }
        .record-item-info {
          margin-left: 30rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          .tag-name {
            font-size: 28rpx;
            color: #333;
          }
          .record-item-remark {
            font-size: 24rpx;
            color: #999;
            // width: auto;
            // max-width: 400rpx;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }
      }
      .record-item-amount {
        flex-shrink: 0;
        font-size: 40rpx;
      }
    }
  }
  .add-record {
    position: fixed;
    right: 20rpx;
    bottom: 150rpx;
    width: 100rpx;
    height: 100rpx;
    background: #fff;
    border-radius: 50%;
    i {
      color: #87cefa;
      font-size: 100rpx;
    }
  }
}
</style>
